<template>
  <el-table
    :data="tableData"
    stripe
    :row-style="rowStyleHandle"
    class="table-style"
    :max-height="tableMaxHeightCompu"
    style="width: 100%"
  >
    <el-table-column
      size="medium"
      align="center"
      width="120"
    >
      <template
        slot="header"
        slot-scope="scope"
      >
        <i class="el-icon-tickets"></i>
      </template>
    </el-table-column>
    <template v-for="title of tableTitle">
      <el-table-column
        :prop="title.prop"
        :label="title.label"
        :height="400"
        size="medium"
        width="240"
      >
      </el-table-column>
    </template>
    <!-- <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column> -->
  </el-table>
</template>
<style lang="less" scoped>
.table-style {
  /deep/ .el-table__row--striped {
    background-color: #e1f9f0;
  }
  /deep/ .el-table__body-wrapper{
    overflow: hidden;
  }
  /deep/ .el-table__body-wrapper:hover{
    overflow: auto;
  }
  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 10px;
  border-radius: 10px;
}
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
}
</style>
<script>
export default {
  props: {
    tableTitle: Array
  },
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    rowStyleHandle (row) {
      if (row.rowIndex % 2 === 0) {
        return 'background-color: #e1f9f0;height: 50px;';
      }
      return 'height: 50px;';
    }
  },computed: {
    tableMaxHeightCompu () {
      //减去header 内容区padding(上下各有两个20，共4个) card的padding
      return window.innerHeight - 60 - 20 - 20 - 40 - 100 - 100;
    }
  }
}
</script>
